<template>
	<view>
		<!-- 验证码 -->
		<view class="" style="background-color: #FFA400;">
			<view class="VCode" style="">
				<label for="" style="margin-left: 30rpx;font-size: 32rpx;">验证码</label>
				<input type="text" style="margin-left: 80rpx;margin-top: 30rpx;" placeholder="请输入学信网验证码"/>
			</view>
		</view>
		
		<!-- 文字提示 -->
		<view class="" style="margin-top: 30rpx;margin-left: 40rpx;">
			<view style="color: #989BA9;font-size: 28rpx;">
				请在"中国高等教育学生信息网"获取在线验证码,了解
			</view>
			<view style="font-size: 28rpx;">
				《获取在线验证码指引》
			</view>
		</view>
		
		<!-- 信息输入 -->
		<view class="info">
			<view class="VCode">
				<label for="" style="margin-left: 30rpx;font-size: 32rpx;">姓名</label>
				<input type="text" style="margin-left: 80rpx;margin-top: 30rpx;" placeholder="请输入姓名"/>
			</view>
			<view class="VCode">
				<label for="" style="margin-left: 30rpx;font-size: 32rpx;">身份证号</label>
				<input type="text" style="margin-left: 80rpx;margin-top: 30rpx;" placeholder="请输入身份证号"/>
			</view>
		</view>
		
		<view class="" style="width: 100%;display: flex;justify-content: center;">
			<button class="btn">立即认证</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.VCode{
	display: flex;
	width: 100%;
	height: 99rpx;
	line-height: 99rpx;
	background-color: white;
	border-top-right-radius: 31rpx;
	border-top-left-radius: 31rpx;
}

.info{
	margin-top: 30rpx;
}

.btn{
	width: 384rpx;
	height: 80rpx;
	background-color: #FFA400;
	color: white;
	position: absolute;
	left: 157rpx;
	bottom: 29rpx;
}

label{
	width: 128rpx;
}
</style>
